<template>
    <h3>当前的x值是：{{x.y}}</h3>
    <button @click="x.y++">x++</button>
    <hr>
    <h3>{{person}}</h3>
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <h2>薪资：{{job.j1.salary}}k</h2>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age+=1">修改年龄</button>
    <button @click="job.j1.salary+=1">涨工资</button>
</template>

<script>
    import {ref,reactive,toRef,toRefs,shallowReactive,shallowRef} from "vue"
    
export default {
    name:"Demo",
    setup(){
        //数据
        // let person = shallowReactive({//只考虑第一层数据的响应式
        let person = reactive({
            name:"张三",
            age:18,
            job:{
                j1:{
                    salary:20,
                }
            },
        });

        //shallowReactive只处理基本数据类型，不进行对象的响应式处理
        let x = shallowRef({
            y:0,
        });


        //返回一个对象(常用)
        return{
            person,
            ...toRefs(person),
            x,
        }
    }
}
</script>


